<template>
  <div id="commucation">
      <div id="outer">

        <div id="navBar">
          <div id="navBarContent">
            <i class="shu"></i>

            <el-menu
            :router="true"
            model="vertical"
            :default-openeds="['1', '2', '3']"
      >
        <el-sub-menu class="navItem" index="1">
          <template #title>消息</template>

          <el-menu-item  class="navItem" :class="isActive ===1 ?'active' : ''">
           
            系统通知
          </el-menu-item>
          
          <el-menu-item class="navItem" :class="isActive ===2 ?'active':'' ">
            互动通知
          </el-menu-item>
         
        
        <el-menu-item  class="navItem" :class="isActive ===3 ? 'active': ''">
          订单通知
        </el-menu-item>
     
      </el-sub-menu>
      </el-menu>

          </div>

          
        </div>

        <div class="menuTitle">
    <p class="menuName">系统通知</p>
  </div>
  <div class="communicationContent">
    <div class="systemNote" >
      <div class="systemNoteItem" >
        <p class="noteItemTitle">三种方式任选, 免费, 付费,任意学！</p>
        <p class="noteItemDetail">即使是你手机相册中的,无任何教学的纯作品视频,放到练习室,也能秒变"教程",免费学会！</p>
       
        <button class="todoent">查看三种方式</button>
      </div>
     
    </div>
    
  </div>
      </div>

  </div>
</template>

<script lang="ts">
import{ref}from 'vue'

const isActive =ref(1)

export default {
  name: 'Commucation',
}
</script>
<script lang="ts" setup>

</script>

<style scoped lang="scss">
#commucation{
  height: 1000px;
  width: 100%;
  background-color:#f5f7f9 ;
  padding-top:20px;
  #outer{
    width: 1200px;
    margin: 0 auto;
    font-size: 14px;
    overflow: hidden;
    #navBar{
      width: 170px;
      position: relative;
      float: left;
      padding-right: 10px;

      .shu {
        width: 5px;
        height: 40px;
        background-color: #f93684;
        position: absolute;
        top: 8px;
        left: 0;
        z-index: 10;
      };

      #navBarContent{
        width: 170px;
        :deep(.el-sub-menu__title) {
          background-color: #fff;
          height:56px
        }

       
      };
      :deep(.navItem) {
          min-width: 170px;
          background-color: #fff;
         
          &:hover {
            color: #f93684;
          }
        }

      #active{
        color:#F93684;
      }

    }


  }
  .communicationContent {
      width: 960px;
      height: 720px;
      padding: 10px 30px;
      background-color: #fff;
      float: right;
    }


  .menuTitle {
  width: 1020px;
  height: 72px;
  background-color: #fff;
  float: left;
  margin-bottom: 10px;
  .menuName {
    line-height: 72px;
    padding-left: 30px;
    float: left;
  }
}
.communicationContent {
  width: 960px;
  height: 720px;
  padding: 10px 30px;
  background-color: #fff;
  float: right;
  .systemNote {
    .systemNoteItem {
      padding: 30px 0;
      border-bottom: 1px solid #e3e3e3;
      .noteItemTitle {
        font-size: 16px;
        margin-bottom: 30px;
        margin: 0;
        color:#111;
        display: block;
        float: left;

       
      }

      
     
      
      .noteItemDetail {
        color: #7d8090;
        
        font-size: 14px;
        margin-top: 30px;
        position: absolute;


      }

      .todoent{
       font-size: 14;
       background-color: #F93684;
        background:#F93684;
        padding: 10px 20px;
        border-radius: 4px;
        display: inline-block;
        border: 1px solid #dcdfe6;
        margin-left: 800px;

      }

     
    }
  }
  .empty {
    margin: 200px;
    text-align: center;
    .emptyImg {
      width: 300px;
      height: 300px;
    }
  }
  
}
}
</style>
